<template>
    <view>
        <tuiShareHead></tuiShareHead>
        <view class="s_swipe">
            <image v-if="list.pic" class="swipe_img" :src="list.pic" mode="aspectFill"></image>
            <view v-else class="img_text">
                <text>暂无照片</text>
            </view>
        </view>
        <view class="s_content">
            <view class="s_name">{{list.name}}</view>
            <view class="s_desc">{{list.description}}</view>
            <view class="tui-flex">
                <view class="s_flex1">
                    <text class="text-price">{{list.rent}}</text> {{{'0':'/天','1':'/时'}[list.rentUnit]}}
                </view>
                <view class="s_flex1 flex-right">押金: ￥{{list.deposit}}</view>
            </view>
            <view class="s_local" v-if="list.rentalLocal">租赁服务点：{{list.rentalLocal}}</view>
        </view>
        <view class="tui-nomore-box">
            <tui-nomore text="详情" backgroundColor="#f7f7f7"></tui-nomore>
            <mp-html class="html-detail" :content="list.detail"></mp-html>
            <!--<view class="html-detail" v-html="list.detail"></view>-->
            <tui-nomore text="已经到最底了" backgroundColor="#f7f7f7"></tui-nomore>
        </view>

        <view class="bot-btn">
            <view class="btn-text" @tap="navTo">
                立即租赁
            </view>
        </view>


    </view>
</template>

<script>
    import tuiShareHead from '@/components/share-head/share-head.vue'
    import tuiNomore from '@/components/tui-nomore/tui-nomore.vue'
    import mpHtml from '@/components/mp-html/mp-html'

    export default {
        name: "leaseDetail.vue",
        components: { tuiShareHead, tuiNomore, mpHtml },
        data() {
            return {
                list: {}
            }
        },
        onLoad(option) {
            console.log(option)
            this.getList(option.id)
        },
        methods: {
            getList(id) {
                uni.showLoading()
                uni.request({
                    url: `lease/item/detail/${id}`,
                    method: 'GET',
                    header: {'content-type': 'application/json', 'Authorization': 'Bearer ' + uni.getStorageSync('token')},
                    success: (res) => {
                        this.list = res.data.data
                        uni.hideLoading();
                    },
                    fail: (res) => {
                        uni.hideLoading();
                        uni.showToast({ title: res.data.message, icon:'none' })
                    }
                })
            },
            navTo() {
                let data = this.list
                let form = {
                    id: data.id,
                    pic: data.pic,
                    name: data.name,
                    sn: data.sn,
                    deposit: data.deposit,
                    rent: data.rent,
                    rentalLocal: data.rentalLocal,
                    description: data.description,
                    rentUnit: data.rentUnit
                }
                console.log(form)
                uni.navigateTo({
                    url: `/pagesA/coupons/leaseOrder?data=${JSON.stringify(form)}`
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.s_swipe {
    width: 100%;
    height: 560rpx;
    position: relative;
    overflow: hidden;
    .swipe_img {
        position: absolute;
        left: 50%;
        width: 100%;
        top: 50%;
        height: 100%;
        transform: translate(-50%, -50%)
    }
    .img_text {
        position: absolute;
        left: 40%;
        line-height: 20;
        color: #999;
    }
}
.html-detail {
    background: #fff;
    padding: 30rpx 0;
}
.s_content {
    background: #fff;
    padding: 30rpx;
    .s_name {
        font-size: 38rpx;
    }
    .s_desc {
        color: #999;
        font-size: 30rpx;
    }
    .s_flex1 {
        flex: 1;
        color: #999;
        .text-price {
            font-size: 45rpx;
            padding-right: 15rpx;
            color: red;
        }
    }
    .s_local {
        font-size: 34rpx;
        color: #3F536E;
    }
    .flex-right {
        text-align: right;
        color: #3F536E;
    }
}
    .tui-nomore-box {
        padding-bottom: 100rpx;
        .html-detail {
            background: #fff;
            padding: 30rpx 0;
        }
    }

    .bot-btn {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        .btn-text {
            background: #6CB041;
            color: #fff;
            line-height: 3;
            font-size: 38rpx;
        }
    }
</style>